<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单标签示例</title>
  </head>
  <body>
    <form action="" method="post">
      <fieldset>
        <legend>系统登录</legend>
        <p class="f_username">
          <label for="username">用户名</label>
          <input
            type="text"
            name="username"
            id="username"
            placeholder="请输入用户名"
          />
        </p>
        <p class="f_password">
          <label for="pwd">密&emsp;码</label>
          <input type="password" name="pwd" id="pwd" placeholder="输入密码" />
        </p>
      </fieldset>

      <p class="f_action">
        <input type="submit" value="登录" />
        <button type="submit"><strong>登录</strong></button>
        <input type="reset" value="重置" />
        <input type="button" value="重置（无响应）" />
      </p>
    </form>
    <hr />
    <input
      type="text"
      name=""
      id="single_text"
      placeholder="单行文本框提示"
      value="值"
    /><br />
    <input type="hidden" name="edit_id" id="edit_id" value="1" /><br />
    <input type="checkbox" name="agree" id="agree" /><label for="agree"
      >同意</label
    ><br />
    <input type="checkbox" name="answer" id="answer_a" /><label for="answer_a"
      >选项一</label
    ><br />
    <input type="checkbox" name="answer" id="answer_b" /><label for="answer_b"
      >选项二</label
    ><br />
    <input type="radio" name="q" id="q_a" /><span>a</span>
    <input type="radio" name="q" id="q_b" /><span>b</span>
    <input type="radio" name="q" id="q_c" /><span>c</span>
    <input type="file" name="" id="" />
    <hr />
    <h2>html5 input</h2>
    <input type="email" name="" id="" /><br />
    <input type="search" name="" id="" /><br />
    <input type="tel" name="" id="" /><br />
    <input type="url" name="" id="" /><br />
    <input type="number" name="" id="" value="0" min="1" max="10" /><br />
    <input type="datetime-local" name="" id="" /><br />
    <input type="month" name="" id="" /><br />
    <input type="color" name="" id="" /><br />
    <input type="range" name="" id="" /><br />
    <hr />
    <progress></progress>
    <meter min="0" max="100" value="50"></meter>
    <textarea name="" id="" cols="30" rows="10">
        多行文本框：实际会通过js扩展为富文本编辑器
    </textarea
    ><br />
    <select name="simple" id="simple">
      <option>选项一</option>
      <option selected>选项二</option>
      <option>选项三</option>
    </select>
    <br />
    <select name="groups" id="groups">
      <optgroup label="分组1">
        <option value="1">选项1-1</option>
        <option value="2">选项1-2</option>
      </optgroup>
      <optgroup label="分组2">
        <option value="1">选项2-1</option>
        <option value="2">选项2-2</option>
      </optgroup>
    </select>
    <br />
    <select name="multi" id="multi" multiple>
      <option>选项一</option>
      <option selected>选项二</option>
      <option>选项三</option>
    </select>
    <br />
    <input type="text" list="search_list" />
    <datalist id="search_list">
      <option>a</option>
      <option>aa</option>
      <option>ba</option>
      <option>bb</option>
      <option>bc</option>
      <option>c</option>
    </datalist>

    <hr />

    <form action="">
      <p>
        <label for="f_classes">班级</label>
        <select name="f_classes" id="f_classes">
            <option>-=选择班级=-</option>
            <option value="a2051">信息A2051</option>
            <option value="a2052">信息A2052</option>
        </select>
      </p>
      <p>
        <label for="truename">姓名</label>
        <input type="text" id="truename" placeholder="请输入姓名" />
      </p>
      <p>
        <label for="check_date">最近检测日期</label>
        <input type="date" name="check_date" id="check_date">
      </p>
      <p>
        <label for="check_number">检测次数</label>
        <input type="number" name="check_number" id="check_number" value="0">
      </p>
      <p>
        <button type="submit" id="submit">提交信息</button>
      </p>
    </form>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </body>
</html>
